// pages/video/video.js
import request from '../../utils/request'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        videoGroupList: [], //导航标签数据
        navId: '', //导航的标识
        videoListData: [], //视频标签对应的视频列表数据
        videoId: '', //视频id标识
        videoUpdateTime: [], // 用来记录video播放的时长
        isTriggered: false, //标识下拉刷新是否被触发
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        // 获取导航数据
        this.getVideoGroupListData();
    },

    // 获取导航数据
    async getVideoGroupListData() {
        let videoGroupListData = await request('/video/group/list');
        // “setData操作是同步的，能马上获取刚刚设置的属性；但是页面渲染则是异步进行的”
        this.setData({
            videoGroupList: videoGroupListData.data.slice(0, 14),
            navId: videoGroupListData.data[0].id
        });
        // 获取标签对应视频列表数据
        this.getVideoGroupData(this.data.navId);
    },

    // 获取视频标签对应的视频数据
    async getVideoGroupData(navId) {
        // 显示加载框
        wx.showLoading({
            title: '加载中',
            mask: true,
        });
        // console.log(navId);
        if (!navId) { //navId为空串的时候直接return出去，不发请求
            return;
        }
        let index = 0;
        let videoGroupData = await request('/video/group', { id: navId });
        // 隐藏加载框
        wx.hideLoading();
        let videoListData = videoGroupData.datas.map(item => {
            item.id = index++;
            return item;
        });
        this.setData({
            videoListData,
            // 关闭下拉刷新
            isTriggered: false
        });
    },

    // 点击切换导航的回调
    changeNav(event) {
        // console.log(event);
        // 通过id向event传参的时候如果传的是number会自动转换为string
        // let navId = event.currentTarget.id;
        // console.log(typeof navId); //string

        // 通过data-id 向event传参的时候,传的是number得到的也是number
        let navId = event.currentTarget.dataset.id;
        // console.log(typeof navId);//number
        this.setData({
            navId,
            // 点击导航切换的时候清空之前的数据
            videoListData: [],
        });
        // 获取标签对应视频列表数据
        this.getVideoGroupData(this.data.navId);
    },

    // 点击播放/继续播放的回调函数
    handlerPlay(event) {
        // console.log(event);
        /* 
        // 为了解决多个视频同时播放的问题

            需求
            1、在点击播放的事件中需要找到上一个播放的视频
            2、在播放新的视频之前关闭上一个正在播放的视频

            关键
            1、如何找到上一个视频的实例对象
            2、如何判断点击播放的视频和正在播放的视频不是同一个视频

            VideoContext.pause()//暂停视频

            VideoContext.play()//播放视频

            VideoContext.stop() //停止视频

            // 这种解决方案是js的一种设计模式
            // 单例模式：
            //  1、需要创建多个对象的场景下，通过一个变量接收，始终保持只有一个对象。
            //  2、节省内存空间。

        */

        // 接收当前的id
        let vid = event.currentTarget.id;
        // 这里用this是因为当前页面的实例对象一直存在，
        // 在this.videoContext未被再次赋值的时候，
        // 它就是上一个播放对象的实例。
        // 当this.videoContext有值的时候才执行this.videoContext.stop()
        // this.vid !== vid && this.videoContext && this.videoContext.stop(); //关闭上一个播放的视频
        // this.vid = vid;

        // 更新data中的 videoId
        this.setData({
            videoId: vid
        });

        // 创建控制video标签的实例对象
        this.videoContext = wx.createVideoContext(vid);
        // videoContext.stop();

        // 判断当前的视频之前是否播放过，是否有播放记录，如果有，跳转至指定的播放位置。
        let { videoUpdateTime } = this.data;
        let videoItem = videoUpdateTime.find(item => item.vid === vid);
        if (videoItem) {
            // videoItem.currentTime = event.detail.currentTime;
            this.videoContext.seek(videoItem.currentTime);
        }
        // VideoContext.seek(number position)  //跳转到指定位置
    },

    // 监听视频播放进度的回调
    handleTimeUpdate(event) {
        // console.log(event);
        let videoTimeObj = { vid: event.currentTarget.id, currentTime: event.detail.currentTime }
        let { videoUpdateTime } = this.data;
        /* 
            思路：判断记录播放时长的videoUpdateTime数组中是否有当前视频的播放记录
            1、如果有，我们需要在原有的播放记录中修改播放时间为当前的播放时间。
            2、如果没有，我们就要在数组中添加当前视频的播放对象。    
        */
        let videoItem = videoUpdateTime.find(item => item.vid === videoTimeObj.vid)
            //！！如果数组的成员是对象，那么find返回的符合条件的对象是浅拷贝！！
        if (videoItem) { //说明之前有同一个视频的对象
            // console.log(videoItem);
            videoItem.currentTime = videoTimeObj.currentTime;
        } else {
            videoUpdateTime.push(videoTimeObj);
        }
        // 统一更新videoUpdateTime的状态。
        this.setData({
            videoUpdateTime
        });
    },

    // 视频播放结束调用
    handlerEnded(event) {
        // console.log("播放结束");
        let { videoUpdateTime } = this.data;
        videoUpdateTime.splice(videoUpdateTime.findIndex(item => item.vid === event.currentTarget.id), 1);
        this.setData({
            videoUpdateTime
        })
    },

    // 自定义下拉刷新的回调：scroll-view
    handlerRefresher() {
        // console.log('下拉刷新');
        this.setData({
            isTriggered: true
        });
        // 再次发请求，获取最新的视频列表数据
        this.getVideoGroupData(this.data.navId);
    },

    // 滚动到底部/右边时触发 -- 上拉触底
    handlerScrolltolower() {
        // console.log('滚动到底部了');
        // 这个功能用来做数据分页：1、后端分页  2、前端分页
        // console.log('发送请求 || 在前端截取最新的数据 追加到视频列表的后方');
        // console.log('网易云音乐暂时没有提供分页的api');
    },

    // 跳转至搜索界面
    toSearch() {
        wx.navigateTo({
            url: '/pages/search/search',
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function() {
        // console.log('页面下拉刷新');
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        // console.log('页面上拉触底');
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function({ from }) {
        // from 是转发事件的来源 --- button 和 menu 两种
        console.log(from);
        if (from === 'button') {
            return {
                title: '来自button的转发',
                path: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        } else {
            return {
                title: '来自menu的转发',
                path: '/pages/video/video',
                imageUrl: '/static/images/nvsheng.jpg'
            }
        }

    }
})